<template>
  <div>
    <el-dialog
      title="标签关联用户列表"
      :visible.sync="visible"
      width="80%"
      append-to-body
    >
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
      >
        <template slot="menuLeft">
          <el-button
            type="primary"
            size="small"
            :disabled="isFlag"
            @click="importExl"
          >
            导出Excel
          </el-button>
        </template>
      </avue-crud>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import crudMixins from '@/mixins/crud';
import { userRealation } from '@/api/app/custom-label';
import request from '@/router/axios';
export default {
  name: 'LabelUser',
  mixins: [crudMixins],
  props: {
    nodeId: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      isFlag: false,
      loading: false,
      tableOption: {
        ...window.$crudMixins.tableOptions,
        addBtn: false,
        menu: false,
        labelWidth: 110,
        column: [
          {
            label: '用户编号',
            prop: 'userId',
          },
          {
            label: '用户昵称',
            prop: 'nickname',
            search: true,
          },
          {
            label: '手机号',
            prop: 'phone',
            search: true,
          },
          {
            label: '注册时间',
            prop: 'registerTime',
            type: 'datetime',
            width: 160,
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
          },
          {
            label: '性别',
            prop: 'sex',
          },
          {
            label: '是否实名',
            prop: 'authFlag',
            dicData: [
              {
                label: '未认证',
                value: '0',
              },
              {
                label: '已认证',
                value: '1',
              },
            ],
          },
          {
            label: '注册渠道',
            prop: 'registerChannel',
          },
        ],
      },
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible(val) {
      if (val) {
        this.getList();
      }
    },
  },
  methods: {
    //导出数据
    importExl() {
      this.downBlobFile(
        '/app/appuser/label/contact/export',
        { ...this.searchForm, labelId: this.nodeId },
        'appuser.xlsx'
      );
    },
    downBlobFile(url, query, fileName) {
      this.isFlag = true;
      return request({
        url: url,
        method: 'get',
        responseType: 'blob',
        params: query,
      })
        .then((response) => {
          this.isFlag = false;
          // 处理返回的文件流
          const blob = response.data;
          if (blob && blob.size === 0) {
            this.$notify.error('内容为空，无法下载');
            return;
          }
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          window.setTimeout(function () {
            window.URL.revokeObjectURL(blob);
            document.body.removeChild(link);
          }, 0);
        })
        .catch(() => {
          this.isFlag = false;
        });
    },

    // 列表查询
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      userRealation(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            id: this.nodeId,
          },
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
